<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String path = request.getContextPath();
String _local_ip_port = request.getScheme()+"://"+ request.getServerName()+":"+request.getServerPort();
%> 
<!DOCTYPE html >
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
    
	<link href="../plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
	
    <link href="../plugins/summernote/dist/summernote.css" rel="stylesheet">
    <link href="css/file-manager.css" rel="stylesheet">
    
     <!-- <script src="../rec/js/jquery-1.8.3.min.js"></script> -->
    
    <style type="text/css">
    .btn-default {
	    color: #333;
	    background-color: #fff;
	    border-color: #ccc;
	}
	.btn-page-style{width:30%;float:left;}
	.btn-page-style-select{width:15%;float:left;}
    </style>
</head>
<body class="gray-bg" >
    <!-- <div class="wrapper wrapper-content animated fadeInRight" style="padding:10" > -->
	    <div class="row" style="height:100%">
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>撰写博文</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="typography.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                       <form class="form-horizontal m-t" id="pushBlogForm">
                         <div class="form-group">
                             <label class="col-sm-2 control-label">标题：</label>
                             <div class="col-sm-4">
                                 <input id="blogTitle" name="blogTitle" minlength="2" type="text" class="form-control" required="" aria-required="true">
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-2 control-label">类别：</label>
                             <div class="col-sm-4">
                                 <select class="form-control m-b" id="typeNo" name="type_no">
                                       
                                 </select>
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-sm-2 control-label"></label>
                             <div class="col-sm-8">
                                 <button type="button" class="btn btn-primary" id="open-file-manager-model">  添加媒体</button>
                             </div>
                         </div>
                         <div class="form-group">
                             <input id="curl" type="hidden" class="form-control" name="blogContent">
                         </div>
                         
                     </form>
                     <form class="form-horizontal m-t">
                     	<div class="form-group">
                             <label class="col-sm-2 control-label">内容：</label>
                             <input id="curl" type="hidden" class="form-control" name="blogContent">
                             <div class="col-sm-10">
                           		<div class="summernote" id="b_content"></div>
                             </div>
                         </div>
                     </form>
                  	</div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>设置封面</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div>
                        </div>

						<form role="form" class="form-horizontal m-t">
							<div class="form-group draggable ui-draggable" >
	                                <label class="col-sm-3 control-label">预览：</label>
	                                <div class="col-sm-9">
		                                <div  style="height:auto;width:100%;max-height:200px;">
		                                	<img src="content/admin/timg.jpg"  id="blog_img" style="width:100%;" alt="" /> 
		                                </div>
	                                </div>
	                        </div>
							<div class="form-group draggable ui-draggable">
	                                <label class="col-sm-3 control-label">文件域：</label>
	                                <div class="col-sm-9">
	                                    <!-- <input type="file" name="" class="form-control"> -->
	                                    
	                                    <input class="form-control" id="fileToUpload"  type="file" name="upfile"><br/>  
	                                    
	                                </div>
	                        </div>
						</form>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>发布状态</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                    	<form role="form" class="form-horizontal m-t">
	                        <div class="form-group draggable ui-draggable">
	                            <label class="col-sm-4 control-label">发布状态：</label>
	                            <div class="col-sm-8">
	                            	<div id="radio-show-type">
	                            	
	                                <label class="radio-inline">
	                                    <input type="radio" checked="" value="0" id="showType" name="showType">公开</label>
	                                <label class="radio-inline">
	                                    <input type="radio" value="1" id="showType" name="showType">私密(仅自己)</label>
	                            	</div>
	                            </div>
	                         </div>
	                         <div id="model_hide">
		                         <div class="hr-line-dashed"></div>
		                         <div class="form-group draggable ui-draggable">
	                                <div class="col-sm-12 col-sm-offset-3">
	                                    <button id="preview_blog" class="btn btn-white" type="button">预览</button>
	                                    <button id="push_blog" class="btn btn-primary" type="button">发布</button>
	                                </div>
	                            </div>
	                         </div>
	            		</form>
                    </div>
                </div>
            </div>

        </div>
    <!-- </div> -->
    <div class="modal inmodal fade" id="file-manager-model" tabindex="-1" role="dialog"  aria-hidden="true" >
             <div class="modal-dialog modal-sm" style="width:80%;height;auto">
                 <div class="modal-content">
                     <div class="modal-header" style="padding:15px 15px">
                         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                         <h4 class="modal-title">撰写博文</h4>
                         <!-- <small class="font-bold">这里可以显示副标题。</small> -->
                     </div>
                     <div class="modal-body gray-bg" id="file-manager-model-content" style="padding:0px">
                     	<div class="ibox-content gray-bg" id="file-manager-model-content1" style="padding:0px" > 
					  			<%-- <jsp:include page="file_manager_push.jsp"></jsp:include> --%>
					  			<div class="wrapper wrapper-content">
							        <div class="row">
							            <div class="col-sm-3">
							                <div class="ibox float-e-margins">
							                    <div class="ibox-content">
							                        <div class="file-manager">
							                            <h5>显示：</h5>
							                            <a name="" class="file-control active">所有</a>
							                            <a name="" class="file-control">文档</a>
							                            <a name="" class="file-control">视频</a>
							                            <a name="" class="file-control">图片</a>
							                            <div class="hr-line-dashed"></div>
							                            <button class="btn btn-primary btn-block">上传文件</button>
							                            <div class="hr-line-dashed"></div>
							                            <h5>文件夹</h5>
							                            <ul class="folder-list" style="padding: 0">
							                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> 文件</a>
							                                </li>
							                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> 图片</a>
							                                </li>
							                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> Web页面</a>
							                                </li>
							                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> 插图</a>
							                                </li>
							                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> 电影</a>
							                                </li>
							                                <li><a href="file_manager.html"><i class="fa fa-folder"></i> 书籍</a>
							                                </li>
							                            </ul>
							                            <h5 class="tag-title">标签</h5>
							                            <ul class="tag-list" style="padding: 0">
							                                <li><a href="file_manager.html">爱人</a>
							                                </li>
							                                <li><a href="file_manager.html">工作</a>
							                                </li>
							                                <li><a href="file_manager.html">家庭</a>
							                                </li>
							                                <li><a href="file_manager.html">孩子</a>
							                                </li>
							                                <li><a href="file_manager.html">假期</a>
							                                </li>
							                                <li><a href="file_manager.html">音乐</a>
							                                </li>
							                                <li><a href="file_manager.html">照片</a>
							                                </li>
							                                <li><a href="file_manager.html">电影</a>
							                                </li>
							                            </ul>
							                            <div class="clearfix"></div>
							                        </div>
							                    </div>
							                </div>
							            </div>
							            <div class="col-sm-9 animated fadeInRight">
							                <div class="row">
							                    <div class="col-sm-12" id="file-list">
							                    </div>
							                    <div class="col-sm-12" >
													<div class="i-box" id="page-list">
														<div>
														    <button id="push-page-left" type="button" class="btn btn-white btn-h btn-page-style ">
														        <i class="fa fa-chevron-left"></i>
														    </button>
														    <select id="push-page-size" class="form-control btn-h btn-page-style-select " name="account">
														    	<option value= "10"> 10 </option>
														    	<option value= "20"> 20 </option>
														    	<option value= "30"> 30 </option>
														    	<option value= "50"> 50 </option>
														    	<option value= "all"> 全部 </option>
														    </select>
														    <select id="push-page-select" class="form-control btn-h btn-page-style-select " name="account">
														    </select>
														    <button id="push-page-right" type="button" class="btn btn-white btn-h btn-page-style">
														        <i class="fa fa-chevron-right"></i>
														    </button>
														</div>
													</div>
							                    </div>
							                </div>
							            </div>
							        </div>
							    </div>
							                       
						</div>
                     </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn btn-primary" data-dismiss="modal" id="file-manager-submit">保存</button>
		            </div>
                 </div>
             </div>
	</div>
    
    
    <div>
    	<input type="hideen" id="serialId" value="${serialId}">
    </div>
    
    
   
    
    
   	<!-- 全局js -->
   	<script src="../rec/js/jquery-1.8.3.min.js"></script>
    <script src="js/lens.js"></script>
    <script src="js/lens-md.js"></script>
    <script src="js/ajax-fileupload.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- 自定义js -->
    <script src="js/content.js"></script>

    <!-- SUMMERNOTE -->
    <script src="../plugins/summernote/dist/summernote.js"></script>
    <script src="../plugins/summernote/summernote-zh-CN.js"></script>
    <script src="js/async-ajax.js"></script>
    <script src="js/file-manager.js"></script>
    <script src="js/lexy-pub.js"></script>

   
    
    
<!--     /*
    var json2map=JSON.parse(json);

	var map2json=JSON.stringify(map);
    */ -->
<!--     <div class="row" style="height:100%">
         <div class="col-sm-8">
		    <div class="ibox-content">
				<form class="form-horizontal m-t">
		         	<div class="form-group">
		                 <label class="col-sm-2 control-label">内容：</label>
		                 <input id="curl" type="hidden" class="form-control" name="blogContent">
		                 <div class="col-sm-10">
		               		<div class="summernote" id="b_content1"></div>
		                 </div>
		             </div>
		         </form>
		     </div>
	    </div>
    </div> -->
    <script>
    	var _local_ip_port = "<%=_local_ip_port %>"
    
        $(document).ready(function () {
            $('#b_content ').summernote({
                lang: 'zh-CN',
                height:350,
                callbacks: {  
                    onImageUpload: function(files, editor, $editable) { //the onImageUpload API  
                        summernoteUpload(files);  
                   }
                }
	            
            });
            
            
            $("#push_blog").click(function(){
				//var value = getFormValueAll("pushBlogForm" , "b_content");
    			//var reqStr = JSON.stringify(value);
    			//console.log("--->"+reqStr);
    			
    			var reqStr = getFormValDiy();
    			console.log("--->"+reqStr);
    			reqStr = reqStr.replace(/&nbsp;/g, "|RP|");
    			var ss = doPost("saveAndUpdateBlogContent",reqStr); 
    			console.log("******>>"+ss);
    			if(ss.detail.id!=null){
    				alert(ss.detail.id);	
    			}
    			
    			//fileUpload();
    			//alert($("#b_content").code());
    		});
            
            
            
            //打开文件管理器窗口
            $("#open-file-manager-model").click(function(){
            	var _push_page_size = $("#push-page-size").val();
            	toFileManagerAll("1", "push-page-select", _push_page_size);
            	select_img();
	            openFileMamagerModel();
            });
            //
            
            
            // 将选中的文件添加到编辑器中
            $("#file-manager-submit").click(function(){
            	var str = "";
            	var srcArr = $(".file-box.img-box.selected img");
            	//alert(srcArr.length());
            	console.log(srcArr.length);
            	console.log(srcArr);
            	var node = document.createElement('div');
            	
            	node.setAttribute("class","file-list")
            	for(var i = 0 ; i < srcArr.length ; i ++){
	            	var p = document.createElement('p');
	            	p.setAttribute("style","text-align:center");
	            	var img = document.createElement('img');
	            	//http://127.0.0.1:8080/upload/gaoqingjingxuan/20171010612671.jpg
	            	var imgUrl = srcArr[i].src;
	            	imgUrl = imgUrl.substring(imgUrl.indexOf("upload"),imgUrl.length);
	            	img.setAttribute("src" , _local_ip_port +"/"+ imgUrl);
	            	p.append(img)
	            	node.append(p);
            	}
            	colseFileMamagerModel();
            	$("#b_content").summernote('insertNode',node );
            	
            });
            
            
           $("#file-manager-model").on("hidden", function() {
                $(this).removeData("modal");
            });
           $("#file-manager-model").on("hidden.bs.modal", function() {
                $(this).removeData("bs.modal");
                //$(".modal-backdrop").remove();
                //alert("modal");
            });
           
        	//文件管理-翻页- 上一页
	       	$("#push-page-left").click(function(){
	       		var selectNum = $("#push-page-select").val();
	       		if(parseInt(selectNum)>1){
	       			var prePageNum = parseInt(selectNum)-1;
	       			var _push_page_size = $("#push-page-size").val();
		       		toFileManagerFile(prePageNum,_push_page_size);
		       		_select_option(prePageNum);
		       		select_img();
	       		}else{
	       			alert("没有了....");
	       		}
	       	})
        	//文件管理-翻页- 下一页
	       	$("#push-page-right").click(function(){
	       		var selectNum = $("#push-page-select").val();
	       		var nextPageNum = parseInt(selectNum)+1;
	       		
	       		if(parseInt(selectNum)<=nextPageNum){
	       			var _push_page_size = $("#push-page-size").val();
		       		toFileManagerFile(nextPageNum,_push_page_size);
		       		_select_option(nextPageNum);
		       		select_img();
	       		}else{
	       			alert("没有了....");
	       		}
	       	})
        	
	       	// 文件管理-翻页
	       	$("#push-page-select").change(function(){
        		var selectNum = $(this).val();
        		var _push_page_size = $("#push-page-size").val();
        		toFileManagerFile(selectNum,_push_page_size);
        		_select_option(selectNum);
        		select_img();
        	})
            // 当pageSize 变化时， 刷新当前页面
        	$("#push-page-size").change(function(){
        		_page_size_change();
        	})
           
           
       		//方法初始化....
	       	getBlogTypeList();

        });
        
        function getBlogTypeList() {
        	console.log("getBlogTypeList");
        	var result = doPost("getBlogTypeCount", null);
        	var typeHtml = "";
        	var obj =  result.detail;
        	if(obj!=null && obj!=""){
        		var bolgTypeList = obj.typelist;
        		$.each(bolgTypeList, function(i, obj) {
        			typeHtml += " <option value='"+obj.type_no+"'>"+obj.type_name+"</option>";
        		});
	        	$("#typeNo").empty();
	        	$("#typeNo").append(typeHtml);
        	}
	    }
        function fileUpload(serialId){
        	$.ajaxFileUpload({  
                url:'fileUpload',  
                secureuri:false,  
                fileElementId:'fileToUpload',//file标签的id  
                dataType: 'json',//返回数据的类型  
                data:{'serialId':serialId},//一同上传的数据  
                success: function (data, status) {  
                    //把图片替换  
                     alert(data);
                },  
                error: function (data, status, e) {  
                    alert(e);  
                }  
            });  
        	
        	
        }
        function summernoteUpload(files){
        	var serialId = $("#serialId").val();
        	var data = new FormData();  
        	for(var i = 0; i < files.length ; i++ ){
	            data.append( "ajaxTaskFile" ,files[i]);  
	            $.ajax({  
	                data : data,  
	                type : "POST",  
	                url : "summernoteUpload", //图片上传出来的url，返回的是图片上传后的路径，http格式  
	                cache : false,  
	                contentType : false,  
	                processData : false,  
	                dataType : "json",  
	                success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名  
	                	var obj = getResponeData(data);
	                	var imgUrl = obj.imgUrl;
	                    $('#b_content').summernote('insertImage', imgUrl);  
	                },  
	                error:function(){  
	                    alert("上传失败");  
	                }  
	            });   
        	}
        	
        	
        }
        
        function openFileMamagerModel(){
        	$("#file-manager-model").modal("show");
        }
        function colseFileMamagerModel(){
        	//$("#file-manager-model-content1").remove();
        	$("#file-manager-model-content1").modal("hide");
        	$("#file-manager-model").modal("hide");
        	$(this).removeData("modal");
        	// $(".modal-backdrop").remove();
        }
        
        
        
        function getFormValDiy(){
        	
        	var blogTitle = $("#blogTitle").val();
        	var typeNo = $("#typeNo").val();
        	var blogContent = $("#b_content").summernote('code').replace(/&nbsp;/g, "|RP|")
        	var showType = $('#radio-show-type input:radio:checked').val();
        	var Json = "{blogTitle:'"+blogTitle+"',typeNo:'"+typeNo+"',blogContent:'"+blogContent+"',showType:'"+showType+"'}";
        	return Json;
        }
        
     	// pageSize 变化时 跳转到第一页，从新分页
        function _page_size_change(){
        	//var selectNum = $("#file-page-select").val();
        	var pageNumber = "1"; 
        	//toFileManagerAll("1" , "file-page-select");
        	var _push_page_size = $("#push-page-size").val();
        	toFileManagerAll(pageNumber , "push-page-select" , _push_page_size);
       		_select_option(pageNumber);
       		select_img();
        }
       	
     	
        function _select_option(val){
        	$("#push-page-select option[value='"+val+"']").attr("selected","selected");
        }
       	

       	
    </script>
    
</body>
</html>